<template>
  <div class="app-container">
    <!-- 查询条件区域 -->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline mb8">
      <el-form-item label="类型">
        <el-select v-model="queryForm.type" placeholder="请选择" style="width:80%" @change="changeType">
          <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>

      <el-form-item label="身份证">
        <el-input v-model="queryForm.aac002" placeholder="请输入身份证号" clearable />
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="queryForm.aac003" placeholder="请输入姓名" clearable />
      </el-form-item>

      <el-form-item label="联系函编号">
        <el-input v-model="queryForm.aae270" placeholder="请输入联系函编号" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- Tab容器 -->
    <el-tabs v-model="activeTab" @tab-click="handleTabChange">
      <el-tab-pane v-if="table_show" label="养老信息表信息" name="ic66tab" />
      <el-tab-pane v-if="!table_show" label="改革前试点账户信息表信息" name="ic60tab" />
    </el-tabs>

    <!-- 子组件容器 -->
    <component
      :is="currentComponent"
      ref="childComponent"
      :key="activeTab"
      :base-params="queryForm"
    />
  </div>
</template>

<script>
import ic66xxb from '@/views/ynsb_comm/transferPrint/ic66xxb'
import ic60xxb from '@/views/ynsb_comm/transferPrint/ic60xxb'

export default {
  name: 'ParentComponent',
  components: { ic66xxb, ic60xxb },
  data() {
    return {
      // 当前激活的Tab
      activeTab: 'ic66tab',
      // 查询表单
      queryForm: {
        type: '',
        aac002: '',
        aac003: '',
        aae270: ''
      },
      options: [
        { value: '1', label: '机关养老信息表' },
        { value: '2', label: '改革前试点账户信息表' }
      ],
      table_show: true
    }
  },
  computed: {
    // 根据当前Tab返回对应的子组件
    currentComponent() {
      return this.activeTab === 'ic66tab' ? ic66xxb : ic60xxb
    }
  },
  methods: {
    // 点击查询按钮
    handleQuery() {
      if (this.$refs.childComponent && this.$refs.childComponent.getList) {
        this.$refs.childComponent.getList()
      }
    },

    // 类型选择变化
    changeType(val) {
      if (val === '1') {
        this.activeTab = 'ic66tab'
        this.table_show = true
      } else {
        this.activeTab = 'ic60tab'
        this.table_show = false
      }
    },

    // 重置查询条件
    resetQuery() {
      this.queryForm = {
        type: '',
        aac002: '',
        aac003: '',
        aae270: ''
      }
      // 重置后自动查询
      this.$nextTick(() => {
        this.handleQuery()
      })
    },

    // Tab切换时触发
    handleTabChange() {
      // 切换Tab后自动查询
      this.$nextTick(() => {
        this.handleQuery()
      })
    }
  }
}
</script>
